<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Kiss OS File Manager</title>
        <meta http-equiv="Content-Language" content="en" />
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <meta name="Steelsquid Kiss OS" content="Administrate/Control/Configure steelsquid-kiss-os from web browser." />
        <meta name="keywords" content="steelsquid, steelsquid-kiss-os, raspberry, pi, debian, linux, distribution, administrator, configure" />
        <meta name="author" content="Andreas Nilsson (Steelsquid)" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
        <link rel="icon" href="favicon.ico" type="image/x-icon"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href="steelsquid.css"/>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="steelsquid.js"></script>
        <script type="text/javascript">
            //<![CDATA[ 
            
             function on_file_list(paramaters){
                tbody = $("#dir_list").find('tbody');
                tbody.empty();
                if(paramaters.length > 1){
                    for(var i = 0; i<paramaters.length; i++){
                        var type = paramaters[i];
                        i++;
                        var name = paramaters[i];
                        i++;
                        var size = paramaters[i];
                        i++;
                        var t_link = paramaters[i];
                        if(type == "DIR"){
                            tbody.append("<tr><td style='width:120px;'><input class='checkbox' type='checkbox' name='' id='' value='" + t_link + "'></input></td><td class='expand'><b><a href=\"javascript:submitSync('file_list', '" + t_link + "');\">" + name + "</a></b></td><td class='nowrap'>" + size + "</td></tr>");
                        }
                        else if(type == "<=="){
                            tbody.append("<tr><td><a href=\"javascript:submitSync('file_list', '" + t_link + "');\">&lt;==</a></td><td class='expand'><a href=\"javascript:submitSync('file_list', '" + t_link + "');\">" + name + "</a></td><td class='nowrap'>" + size + "</td></tr>");
                        }
                        else{
                            tbody.append("<tr><td><input class='checkbox' type='checkbox' name='' id='' value='" + t_link + "'></input></td><td class='expand'><a href=\"" + t_link + "\">" + name + "</a></td><td class='nowrap'>" + size + "</td></tr>");
                        }
                    }
                }
                if(paramaters.length == 1){
                    tbody.append("<tr><td colspan='3'>No files found!</td></td></tr>");
                }
            }
            
            /**
             * Create a directory
             */
            function mkdir(){
                
            }

            /**
             * When create a directory
             */
            function on_file_mkdir(){
                
            }
            
            /**
             * On web interface share /mnt, /media and /home/steelsquid
             */
            function on_web_interface_share(paramaters){
                if(paramaters[0] == "True"){
                    showLayer('main');
                }
                else{
                    showLayer('share');
                }
            }
            function on_web_interface_share_on(paramaters){
                on_web_interface_share(paramaters);
            }
            
            
            /**
             * When the page is loaded
             */
            function onPageLoad(){
                submitNoPW('web_interface_share');
            }
            
            /**
             * When go back or middle mouse button or esc pressed
             */
            function onBack(){
            }
            
            /**
             * This will execute every 10 second
             */
            function onEvery05s(){
            }

            /**
             * This will execute every 10 second
             */
            function onEvery10s(){
            }

            /**
             * When a layer is shown
             */
            function onLayerShown(layer){
                if(layer == "main"){
                    submitSync('file_list');
                }
            }
            
            /**
             * On submit command
             */
            function onWork(command){
            }

            /**
             * On answer from submit dommand
             */
            function onSleep(command){
            }

            
            /**
             * On window resize
             */
            function onResize(width, height){
            }            

            /**
             * On upload complete
             */
            function on_upload_ok(){
                submitSync('file_list');
                showAlertMedium("Upload complete", false);
            }            

            /**
             * On mkdir
             */
            function on_file_mkdir(){
                showAlertShort("Directory created", false);
                submitSync('file_list');
            }            

            /**
             * On mkfile
             */
            function on_file_mkfile(){
                showAlertShort("File created", false);
                submitSync('file_list');
            }            

            /**
             * On del
             */
            function del(){
                var arr = [];
                $('.checkbox').each(function(i, obj){
                    if($(obj).prop('checked')){
                        arr.push($(obj).val());
                    }
                });
                if(arr.length>0){    
                    submitSyncConfirm('Are you sure you want to delete, it can not be undone?', 'file_del', arr);
                }
                else{
                    showAlertMedium("No file or directory selected!", true);
                }
            }            
            function on_file_del(paramaters){
                showAlertShort("File(s) deleted", false);
                submitSync('file_list');
            }            

            /**
             * On prop
             */
            function rename(){
                var arr = [];
                $('.checkbox').each(function(i, obj){
                    if($(obj).prop('checked')){
                        arr.push($(obj).val());
                    }
                });
                if(arr.length==0){    
                    showAlertMedium("No file or directory selected!", true);
                }
                else if(arr.length!=1){    
                    showAlertMedium("Only one file or folder can be selected!", true);
                }
                else{
                    var currentPath = arr[0];
                    var currentName = currentPath.replace(/^.*[\\\/]/, '')
                    var newName = prompt("Please enter new name", currentName);
                    var newPath = currentPath.substring(0, currentPath.lastIndexOf('/')) + '/' + newName;
                    submitSync('file_rename', currentPath, newPath);
                }
            }            
            function on_file_rename(paramaters){
                showAlertShort("File/Directory renamed", false);
                submitSync('file_list');
            }            

            /**
             * 
             */
            function copy(){
                var arr = [];
                $('.checkbox').each(function(i, obj){
                    if($(obj).prop('checked')){
                        arr.push($(obj).val());
                    }
                });
                if(arr.length==0){    
                    showAlertMedium("No file or directory selected!", true);
                }
                else{
                    submitSync('file_copy', arr);
                }
            }            

            /**
             * 
             */
            function cut(){
                var arr = [];
                $('.checkbox').each(function(i, obj){
                    if($(obj).prop('checked')){
                        arr.push($(obj).val());
                    }
                });
                if(arr.length==0){    
                    showAlertMedium("No file or directory selected!", true);
                }
                else{
                    submitSync('file_cut', arr);
                }
            }            

            function on_file_paste(paramaters){
                showAlertShort("File(s)/Directory(s) pasted", false);
                submitSync('file_list');
            }            
            
            //]]>
        </script>
        
    </head>
    <body>
        <table class="bar">
            <thead>
                <tr>
                    <td>
                        <img alt="logo" src="img/bar_steelsquid.png"></img>
                    </td>
                    <td>
                        Kiss OS File Manager
                    </td>
                    <td>
                        <img alt="logo" src="img/bar_menu.png"></img>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr onclick="javascript:window.location = 'http://www.steelsquid.org/steelsquid-kiss-os';">
                    <td>
                        <img alt="logo" src="img/bar_help.png"></img>
                    </td>
                    <td colspan="2" >
                        Help
                    </td>
                </tr>
                <tr onclick="javascript:window.location = '/';">
                    <td>
                        <img alt="logo" src="img/bar_admin.png"></img>
                    </td>
                    <td colspan="2" >
                        Administrator
                    </td>
                </tr>
                <tr onclick="javascript:window.location = '/download';">
                    <td>
                        <img alt="logo" src="img/bar_download.png"></img>
                    </td>
                    <td colspan="2" >
                        Download Manager
                    </td>
                </tr>
                <tr onclick="javascript:window.location = '/play';">
                    <td>
                        <img alt="logo" src="img/bar_play.png"></img>
                    </td>
                    <td colspan="2" >
                        Media Player
                    </td>
                </tr>
                <tr onclick="javascript:window.location = '/utils';">
                    <td>
                        <img alt="logo" src="img/bar_utils.png"></img>
                    </td>
                    <td colspan="2" >
                        Utils
                    </td>
                </tr>
                <tr onclick="javascript:submitSyncConfirm('Are you sure you want to reboot?', 'reboot');">
                    <td>
                        <img alt="logo" src="img/bar_reboot.png"></img>
                    </td>
                    <td colspan="2" >
                        Reboot
                    </td>
                </tr>
                <tr onclick="javascript:submitSyncConfirm('Are you sure you want to shutdown?', 'shutdown');">
                    <td>
                        <img alt="logo" src="img/bar_shutdown.png"></img>
                    </td>
                    <td colspan="2" >
                        Shutdown
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="flow">
            <div class="layer" id="share">
                The File Manager is not enabled on this system.<br/>
                If you enable the File Manger you will expose <span class="highlight">/root</span> on this web interface.<br/>
                You can undo this choice under Administrator/Administrator interface<br/>
                <br/>
                <button onclick="javascript:submitSyncFromPrompt('web_interface_share_on', 'Please enter password for the user root?', '');">Enable File Manager</button>
            </div>
            <div class="layer" id="main">
                <table class="grid">         
                    <tr>
                        <td style="width:25%">
                            <button title="Copy file or folder" onclick="javascript:copy()">Copy</button>
                        </td>
                        <td style="width:25%">
                            <button title="Cut file or folder" onclick="javascript:cut()">Cut</button>
                        </td>
                        <td style="width:25%">
                            <button title="Paste file or folder" onclick="javascript:submitSync('file_paste')">Paste</button>
                        </td>
                        <td style="width:25%">
                            <button title="Delete files or folders" onclick="javascript:del()">Delete</button>
                        </td>
                    </tr>
                </table>         
                <table class="grid">         
                    <tr>
                        <td style="width:25%">
                            <button title="Rename file or folder" onclick="javascript:rename()">Rename</button>
                        </td>
                        <td style="width:25%">
                            <button title="Create new folder" onclick="javascript:submitSyncFromPrompt('file_mkdir', 'Please enter folder name', '')">Folder</button>
                        </td>
                        <td style="width:25%">
                            <button title="Create new file" onclick="javascript:submitSyncFromPrompt('file_mkfile', 'Please enter file name', '')">File</button>
                        </td>
                        <td style="width:25%">
                            <button class="upload" title="Upload a file" id="file_upload">Upload</button>
                        </td>
                    </tr>
                </table>         
                <table id="dir_list" class="list">
                    <thead>
                        <tr>
                            <th colspan="2">Files and folders</th><th>Size</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td></td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>
